<script setup>
import { goCommunity } from "../../tools/go";
import VueQrcode from 'vue-qrcode'; // 引入二维码组件
const lists = [
  {img:"./static/img/qq.png",name:'QQ'},
  {img:"./static/img/wechat.png",name:'微信'},
]
</script>

<template>

  <view class="titli">
    <v-icon @click="goCommunity" class="icon" icon="mdi-chevron-left"></v-icon>
    <h3>访客邀请</h3>
  </view>
  <h3 class="title">xxx小区欢迎您</h3>
  <!-- 替换为二维码 -->
  <view class="container w">
    <vue-qrcode class="visit" value="https://example.com" :size="50"></vue-qrcode>
    <view class="one">
        <view>
          <v-icon class="icon" icon="mdi-key"></v-icon>
          <h4>开门钥匙</h4>
        </view>
      <view>
        <h3>181259</h3>
        <button>复制</button>
      </view>
    </view>
  </view>



  <text class="t-tow">
  </text>

  <text class="t-thow w"></text>
  <view class="fx w"
    @click="saveToAlbum"
  >
    <v-icon icon="mdi-qrcode" class="qrcode"></v-icon>
    <text class="tex">请注意，此密钥仅限当天有效。</text>
    <button>保存到相册</button>
  </view>

  <view class="tu">
    <ul>
      <li v-for="(item,index) in lists" :key="index">
        <img :src="item.img">
        <text>{{ item.name }}</text>
      </li>
    </ul>
  </view>
</template>

<style scoped lang="scss">
@import "../../static/css/title/index.css";
.tex{
  margin-top: 10px;
  color: red;
}
.tu{
  ul{
    li{
      img{
        width: 50px;
        height: 50px;
      }
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0 20px;
    }
    display: flex;
  }
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 0;
}
.fx{
  .qrcode{

    font-size: 200px;
    background: #FFFFFF;
    border: 2px solid #000000;
  }
  button{
    margin-top: 10px;
    width: 300px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: red;
    border: 2px solid #000000;
  }
  text{
    font-size: 17px;
  }
  margin-top: 20px;
  align-items: center;
  justify-content: center;
  display: flex;

  flex-direction: column;
}
.t-thow{
  display: block;
  text-align: center;
  width: 95%;
  margin: 20px auto;
  color: red;
}

.t-tow{
  display: block;
  width: 95%;
  margin: 10px auto;
}
.t-one{
  display: block;
  margin-top: 100px;
  text-align: center;
}
.container{


  .one{
    view:nth-child(2){
      margin-top: 5px;
      display: flex;
      align-items: center;
    }
    view{
      button{
        margin-left: 10px;
        width: 55px;
        height: 30px;
        line-height: 30px;
        font-size: 15px;
        color: #007aff;
        border-radius: 120px;
        background: #FFFFFF;
      }
      h3{
        font-weight: 700;
        font-size: 25px;
      }
      h4{
        font-weight: 700;
        font-size: 17px;
      }
      .icon{
        font-size: 20px;
        transform: rotate(90deg);
      }
      display: flex;
      color: #FFFFFF;

    }
    margin-left: 20px;
    display: flex;
    flex-direction: column;

  }
  .visit{
    width: 100px;
    color: #FFFFFF;
  }
  background: #007aff;
  border-radius: 12px;
  height: 170px;
  display: flex;
  align-items: center;
  padding: 12px;
  justify-content: center;
  position: relative;
}

.title {
  font-size: 18px;
  font-weight: 500;
  margin: 12px;
}
.titli {
  background: #FFFFFF;
}
</style>
